<template>
  <div class="container" :style="'min-height: calc(100vh - ' + spaceBarHeight + 'px)'">
    <div class="top-nav" :style="{height: spaceBarHeight + 'px' , background:globalStyle.styleType === 10 ? globalStyle.color2 : globalStyle.color1}">
      <img :src="fileSpace + '/images/goback-icon.png'" class="goback" @click="$pt.navigateBack({ delta: -1 })" />
      <div class="flex-center v-align-c top-name-bar"
        :style="{'padding-top': statusBarTop + 'px', 'height': barHeight + 'px' ,'box-sizing': 'border-box;'}">
        <label class="top-txt font-w">顾客详情</label>
      </div>
    </div>
    <div class="top-header-bg" :style="{marginTop: spaceBarHeight+ 'px'}">
      <div class="bg-style" :style="{background:globalStyle.styleType === 10 ? globalStyle.color2 : 'linear-gradient('+globalStyle.color1 +' 30%,'+ globalStyle.color2 +')'}"></div>
    </div>
    <div class="customer-info">
      <div class="avatar-name">
        <img v-if="veekrayInfo.avatar" class="headshop-avatar" :src="veekrayInfo.avatar" mode="cover"/>
        <div class="mar-l-9 mar-t-28 font-18 font-w">{{ veekrayInfo.nickname }}</div>
      </div>
      <div class="authority">
        <van-switch
          :checked="checked"
          active-color="#12cf66"
          @change="onChange"
          size="24px"
        />
        <div class="font-12 font-color-9">分销权限</div>
      </div>
      <div style="padding-top: 58px;padding-left: 12px;">
        <div class="font-13"><span class="font-color-9">职业：</span><span>{{veekrayInfo.career}}</span></div>
        <div class="font-13"><span class="font-color-9">省区：</span><span>{{veekrayInfo.address}}</span></div>
      </div>
      <div class="tag-wrap" v-if="labelsBoolean">
        <span class="tag" v-for="(item,index) in labels" :key="index">{{item.labelName}}</span>
      </div>
    </div>
    <div class="personal-consumption">
      <div class="v-align-c pad-l-12 pad-t-10">
        <img v-if="fileSpace" :src="veekrayInfo.avatar" class="width-19 height-19 border-radius5" alt="">
        <span class="mar-l-9">个人消费</span>
      </div>
      <div class="v-align-c mar-t-20">
        <div class="flex-item" style="padding-left:41px">
          <div class="font-19 font-w">{{countData.countMonthConsume}}</div>
          <div class="font-11 font-color-9 mar-t--2">本月消费(元)</div>
        </div>
        <div class="flex-item" style="padding-left:36px">
          <div class="font-19 font-w">{{countData.countMonthConsumeNum}}</div>
          <div class="font-11 font-color-9 mar-t--2">本月订单数(笔)</div>
        </div>
      </div>
      <div class="v-align-c mar-t-20">
        <div class="flex-item" style="padding-left:41px">
          <div class="font-19 font-w">{{countData.countMonthConsumeTotal}}</div>
          <div class="font-11 font-color-9 mar-t--2">累计消费(元)</div>
        </div>
        <div class="flex-item" style="padding-left:36px">
          <div class="font-19 font-w">{{countData.countOrderTotal}}</div>
          <div class="font-11 font-color-9 mar-t--2">累计订单数(笔)</div>
        </div>
      </div>
    </div>
    <div class="personal-consumption" v-if="checked">
      <div class="v-align-c pad-l-12 pad-t-10">
        <img v-if="fileSpace" :src="veekrayInfo.avatar" class="width-19 height-19 border-radius5" alt="">
        <span class="mar-l-9">分销情况</span>
      </div>
      <div class="v-align-c mar-t-20">
        <div class="flex-item" style="padding-left:41px">
          <div class="font-19 font-w">{{countData.countMonthProjectNum}}</div>
          <div class="font-11 font-color-9 mar-t--2">本月分销商品(件)</div>
        </div>
        <div class="flex-item" style="padding-left:36px">
          <div class="font-19 font-w">{{countData.getMonthAmount}}</div>
          <div class="font-11 font-color-9 mar-t--2">本月获得佣金(元)</div>
        </div>
      </div>
      <div class="v-align-c mar-t-20">
        <div class="flex-item" style="padding-left:41px">
          <div class="font-19 font-w">{{countData.totalProjectNum}}</div>
          <div class="font-11 font-color-9 mar-t--2">累计分销商品(件)</div>
        </div>
        <div class="flex-item" style="padding-left:36px">
          <div class="font-19 font-w">{{countData.getAmount}}</div>
          <div class="font-11 font-color-9 mar-t--2">累计获得佣金(元)</div>
        </div>
      </div>
    </div>
    <div class="visit-info" v-if="countData.lastAccessGoodsTime">最后一次访问时间：<span class="mar-l-4">{{countData.lastAccessGoodsTime}}</span></div>
    <div class="page-foot">
      <!-- 隐藏在线沟通功能 -->
      <!-- <button class="chat" @click="goChat">在线沟通</button> -->
      <button class="settag" @click="$pt.navigateTo({url:'/pages/home/customer/label/main?memberId=' + friendId})">设置标签</button>
    </div>    
  </div>
</template>

<script>
  import { getMemberInfo, setDistributor, delDistributor, getDistributor } from '@/api/customer'
  import { countByMemberId } from '@/api/personal'
  export default {
    data() {
      return {
        searchValue: '',
        statusList: ['全部', '购买过的', '未购买的'],
        activeIndex: 0,
        listDatas: [],
        currentPage: 1,
        pullLoad: {
          loading: false,
          finished: false
        },
        veekrayInfo: {},
        labels: [],
        labelsBoolean: true,
        friendId: '',
        countData: {},
        expand: false,
        checked: false,
        params: {
          memberId: '',
          shareMemberId: ''
        },
        shareInfo: {},
        index: 0,
        spaceBarHeight: 0,
        statusBarHeight: 0,
        statusBarTop: 0,
        barHeight: 0,
        globalStyle: {}
      }
    },
    onLoad() {
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      // 获取胶囊按钮信息
      let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
      // 设备信息
      let devInfo = this.$pt.getSystemInfoSync()
      // 整个导航栏高度
      this.spaceBarHeight = devInfo['statusBarHeight'] + menuButtonInfo['height'] + (menuButtonInfo['top'] - devInfo['statusBarHeight']) * 2
      this.barHeight = this.statusBarHeight - 2
      // this.spaceBarHeight = this.statusBarHeight + 44
      this.statusBarTop = this.statusBarHeight - 42
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') === -1) {
        // android类型
        this.statusBarTop = this.statusBarHeight - 40
        // this.spaceBarHeight = this.statusBarHeight + 36
        this.barHeight = this.statusBarHeight - 4
      }
    },
    onShow() {
      this.labels = []
      this.$pt.setNavigationBarTitle({
        title: this.getCurrentPage().query.name
      })
      this.friendId = this.getCurrentPage().query.id
      if (this.getCustomerId) {
        this.getVeekrayInfo()
      }
      this.globalStyle = this.$pt.getStorageSync('appInfo').style
      this.params.memberId = this.getCustomerId
      this.params.shareMemberId = this.friendId
      this.getDistributor()
    },
    methods: {
      goHome(memberId) {
        this.$utils.setMyId(memberId)
        this.$root.$mp.appOptions.query = {}
        this.$pt.reLaunch({ url: '/pages/home/main' })
        // this.$pt.reLaunch({ url: '/pages/home/main?memberId=' + veekrayInfo.memberId })
      },
      goChat() {
        this.$pt.navigateTo({ url: '/pages/chat/main?friendId=' + this.friendId })
      },
      getDistributor() {
        // 获取顾客是否为分销商
        this.$pt.showLoading({
          title: '加载中',
          mask: true
        })
        getDistributor(this.params).then(response => {
          if (response.isError) return
          this.shareInfo = response.data
          if (!this.shareInfo) {
            this.checked = false
            this.$pt.hideLoading()
            this.index = 0
            return
          }
          if (this.shareInfo.shareId) {
            this.checked = true
          } else {
            this.checked = false
          }
          this.$pt.hideLoading()
          this.index = 0
        })
      },
      setDistributor() {
        // 将顾客设置为分销商
        setDistributor(this.params).then(response => {
          if (response.isError) return
          // this.checked = true
          this.getDistributor()
        })
      },
      delDistributor() {
        // 取消顾客分销商
        delDistributor(this.shareInfo.shareId).then(response => {
          if (response.isError) return
          // this.checked = false
          this.getDistributor()
        })
      },
      getVeekrayInfo() {
        countByMemberId({
          memberId: this.getCustomerId,
          customerMemberId: this.friendId
        }).then((response) => {
          if (response.isError) return
          this.countData = response.data
          console.log('我是countData', this.countData)
        }).catch(() => {
        })
        getMemberInfo({
          memberId: this.getCustomerId,
          customerMemberId: this.friendId
        }).then((response) => {
          if (response.isError) return
          this.labelsBoolean = true
          this.veekrayInfo = response.data
          console.log('我是getMemberInfo', this.veekrayInfo)
          this.labels = this.veekrayInfo.veekrayLabelList
          // this.veekrayInfo.updateTime = this.veekrayInfo.updateTime.substring(0, 10)
          if (this.labels.length === 0) {
            this.labelsBoolean = false
          }
        }).catch(() => {
        })
      },
      onChange(event) {
        this.index++
        if (this.index > 1) return
        // switch开关变动事件
        if (!event.mp.detail) {
          this.$pt.showModal({
            title: '温馨提示',
            confirmText: '确认关闭',
            content: '关闭分销权限将会解绑该分销商下所有的顾客',
            success: res => {
              if (res.confirm) {
                this.delDistributor()
              }
            }
          })
        } else {
          this.$pt.showModal({
            title: '温馨提示',
            confirmText: '确认开启',
            content: '启用分销权限的顾客将会看到您店铺的分销佣金',
            success: res => {
              if (res.confirm) {
                this.setDistributor()
              }
            }
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
@color-3: #333333;
@color-w: #ffffff;
@color-y: #ffe200;
@color-9: #999999;
.container{
  background-color: #fff;
  padding-bottom: 93px;
  box-sizing: border-box;
}
.page-foot{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  height: 83px;
  padding: 0 15px;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #F1F1F1;
  button{
    line-height: normal;
    font-size: 15px;
    width: 100%;
    text-align: center;
    border-radius: 22.5px;
    height: 45px;
    line-height: 45px;
    &::after{
      border: unset;
    }
  }
  .chat{
    background: @color-3;
    color: @color-w;
    margin-right: 15px;
  }
  .settag{
    background: @color-y;
    color: @color-3;
  }
}
  .btn-border {
    border: 1px solid #969896;
    border-radius: 5px;
    height: 20px;
    background-color: #ffffff;
  }
  .line-h{
    line-height: 1.6;
  }
  .top-nav{
    color: #333;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 20rpx;
    .top-txt{
      font-size: 15px;      
      .txt-min{
        max-width: 90px;
        height: 24px;
        line-height: 1.3;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }
    }
    .iconfont{
      margin-top: 3px;
      margin-left: 3px;
      font-size: 15px;
      transform:rotate(90deg);
      &.icon-next{
        margin-top: 0px;
        margin-left: 3px;
        font-size: 15px;
        transform:rotate(0deg);
        color: #292929;
      }
    }
  }
  .top-header-bg {
    height: 370rpx;
    position: relative;
    z-index: 10;
    .bg-style {
      display: block;
      position: absolute;
      z-index: 5;
      font-size: 0;
      left: 50%;
      bottom: 58px;
      width: 600px;
      height: 320px;
      margin-left: -300px;
      background: #ffe200;
      border-radius: 100%;
    }
  }
  .customer-info{
    margin: -156px 15px 0;
    min-height: 139px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 9px rgba(176, 176, 176, 0.2);
    position: relative;
    z-index: 11;
    .avatar-name{
      display: flex;
      position: absolute;
      top: -20px;
      img{
        width: 66px;
        height: 66px;
        border-radius: 50%;
        border: 2px solid #fff;
      }
    }
    .authority{
      position: absolute;
      right: 26px;
      top: 17px;
    }
    .tag-wrap{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      padding: 3px 12px 13px;
      .tag{
        line-height: 17px;
        padding-left: 4.5px;
        padding-right: 4.5px;
        border-radius: 3px;
        font-size: 12px;
        color: #FFBA00;
        background-color: #FFF8C3;
        margin-right: 6px;
        margin-top: 6px;
      }
    }
  }
  .personal-consumption{
    margin: 15px 15px 0;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 9px rgba(176, 176, 176, 0.2);
    height: 187px;
    .border-radius5{
      border-radius: 50%;
    }
  }
  .visit-info{
    margin: 7px 15px 0px;
    font-size: 12px;
    color: #999;
    background-color: #F7F7F7;
    border-radius: 4px;
    line-height: 26px;
    padding-left: 12px;
  }
  .goback{
    position: absolute;
    left: 6px;
    bottom: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
</style>
